<template>
	<view class="stock">
		<calendar ref="calendar" :descList='arr' @change='eee'></calendar>
		<view class="stock-item" v-for="(item,index) in dataList">
			<!-- <image class="item-img" src="../../static/nopic2.png" mode=""></image> -->
			<view class="item-right">
				<view class="right-title">
					<text>{{item.name}}</text>
					<image class="title-icon" src="../../static/delete.jpg" mode="" @click="del(index)"></image>
				</view>
				<view class="right-bottom">
					<view class="bottom-left">
						<text>价格：{{item.amount}}</text>
						<text style="padding: 20rpx 0;">库存：{{item.stock}}</text>
						<text>出行日期：{{item.date_travel|format}}</text>
					</view>
					<view class="bottom-right">
						<view class="right-tab">
							<text class="tab-item" :class="{'active':item.status==1?false:true}"
								@click="onDpwnUp(index,1)">上架</text>
							<text class="tab-item" :class="{'active':item.status==0?false:true}"
								@click="onDpwnUp(index,0)">下架</text>
						</view>
						<view class="right-btn" @click="edit(index)">编辑规格</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 120rpx"></view>
		<view class="footer">
			<view class="footer-btn" @click="open">添加规格</view>
		</view>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'
	import {
		uniModal,
		uniNavigate,
		uniToast,
		uniBack
	} from '@/utils/uniPromise.js'
	import calendar from '../compontent/calendar.vue'
	import {
		formatDate,
		getDateObject
	} from '@/utils/moment/index.js'
	export default {
		mixins: [pagingMixin],
		components: {
			calendar
		},
		data() {
			return {
				dataList: [],
				fk_ticket_pro_id: '',
				time: [],
				more: true,
				arr: []
			}
		},
		filters: {
			format(time) {
				return formatDate(time, 'YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss')
			}
		},
		onLoad(option) {
			this.$refs.calendar.initData(new Date(), 'init')
			this.fk_ticket_pro_id = option.fk_ticket_pro_id
		},
		onShow(){
			let date = new Date()
			let monthStartDate = formatDate(new Date(date.getFullYear(), date.getMonth(), 1), 'YYYY-MM-DD',
				'YYYY-MM-DD HH:mm:ss')
			let monthendDate = formatDate(new Date(date.getFullYear(), date.getMonth() + 1, 0), 'YYYY-MM-DD',
				'YYYY-MM-DD HH:mm:ss')
			this.initPage({
				ticket_id: this.fk_ticket_pro_id,
				start_time: monthStartDate,
				end_time: monthendDate,
				page_size: 9999
			})
		},
		methods: {
			initPage(params) {
				// console.log(formatDate(monthStartDate, 'YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss'))
				this._init_data('GetTicketStockList', {
					...params
				}, {
					callBack: this.callBack
				})
			},
			callBack(data) {
				if (this.more) {
					this.arr = data.map(item => {
						return {
							date: getDateObject(item.date_travel).date,
							value: '.'
						}
					})
					this.more = false
				}
				return data
			},
			eee(val) {
				console.log(val)
				this.time = val
				if (val.type == "date") {
					this.time.befDay = val.year + '-' + val.month + '-' + val.date
					this.time.aftDate = val.year + '-' + val.month + '-' + val.date
					this.more = false
				}
				 if (val.type == "month") {
					this.more = true
					this.arr = []
				}

				this.initPage({
					ticket_id: this.fk_ticket_pro_id,
					start_time: this.time.befDay,
					end_time: this.time.aftDate,
					page_size: 9999
				})
			},
			open() {
				uniNavigate(`/package/system/ticket/stock/add?fk_ticket_pro_id=${this.fk_ticket_pro_id}`)
			},
			del(idx) {
				uniModal({
					content: '是否删除该条库存'
				}).then(res => {
					if (res == 'success') {
						this.$DeleteManagerData(13,this.dataList[idx].pk_id)
						this.dataList.splice(idx, 1)
					}
				})
			},
			edit(idx){
				uniNavigate(`/package/system/ticket/stock/add?edit=${idx}`)
			},
			//切换产品上架下架
			onDpwnUp(index, el) {
				this.$loading('请稍等')
				this.$set(this.dataList[index], 'status', el)
				let params = {
					status: el,

					pk_id: this.dataList[index].pk_id
				}
				// console.log(params)
				this.$UpdateModify('b_ticket_stock', {
					...params
				}).then(res => {
					// this.initPage()
					this.$hide()
					this.$toast(el == 1 ? '上架成功' : '下架成功')
				})

			},
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.stock {
		padding: 20rpx 0 0;

		.stock-item {
			width: 100%;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 24rpx 20rpx;
			display: flex;
			align-items: center;
			margin-top: 22rpx;

			.item-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.item-right {
				display: flex;
				flex-direction: column;
				width: 100%;

				.right-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-icon {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.right-bottom {
					display: flex;
					// align-items: center;
					justify-content: space-between;
					margin-top: 38rpx;

					.bottom-left {
						display: flex;
						flex-direction: column;
						font-size: 24rpx;
						color: #999;
					}

					.bottom-right {
						.right-tab {
							width: 150rpx;
							border-radius: 4rpx;
							line-height: 50rpx;
							display: flex;
							align-items: center;
							height: 50rpx;
							border: 1px solid #3297EF;

							.tab-item {
								width: 75rpx;
								height: 100%;
								color: #fff;
								background-color: #3297EF;
								text-align: center;
								border-radius: 4rpx 0 0 4rpx;
								overflow: hidden;

								&.active {
									background-color: #fff;
									color: #3297EF;

								}
							}
						}

						.right-btn {
							width: 150rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							border: 1px solid #333333;
							border-radius: 4rpx;
							font-size: 24rpx;
							color: #333;
							margin-top: 16rpx;
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			width: 100%;
			background-color: #fff;
			height: 108rpx;
			line-height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.footer-btn {
				width: 660rpx;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #3297EF;
				color: #fff;
				border-radius: 10rpx;
				text-align: center;
				font-size: 30rpx;
			}
		}
	}
</style>
